<template>
  <div class="card mb-5">
    <h2 class="text-2xl mb-5">📊 预测结果统计</h2>
    
    <div class="grid grid-cols-1 gap-4">
      <!-- Detection Counts -->
      <div class="col-span-full p-4 bg-blue-50 rounded-lg border border-blue-300">
        <h4 class="mt-0 mb-2.5 text-blue-800">📊 检测数量统计</h4>
        <div class="grid grid-cols-2 md:grid-cols-5 gap-2.5">
          <div
            v-for="stat in stats.counts"
            :key="stat.label"
            class="bg-white p-2 rounded text-center border-l-4 border-blue-600"
          >
            <div class="text-xl font-bold text-blue-800">{{ stat.value }}</div>
            <div class="text-xs text-gray-600">{{ stat.label }}</div>
          </div>
        </div>
      </div>

      <!-- Total Time -->
      <div class="col-span-full p-4 bg-orange-50 rounded-lg border-2 border-orange-500 text-center">
        <div class="text-3xl font-bold text-orange-700">{{ stats.totalTime }}</div>
        <div class="text-sm text-gray-600 mt-1">任务总耗时</div>
      </div>

      <!-- Basic Timing -->
      <div v-if="stats.showTiming" class="col-span-full p-4 bg-blue-50 rounded-lg border border-blue-300">
        <h4 class="mt-0 mb-2.5 text-blue-800">⏱️ 基础处理时间</h4>
        <div class="grid grid-cols-2 md:grid-cols-5 gap-2.5">
          <div
            v-for="stat in stats.basicTiming"
            :key="stat.label"
            class="bg-white p-2 rounded text-center border-l-4 border-blue-600"
          >
            <div class="text-base font-bold text-blue-800">{{ stat.value }}</div>
            <div class="text-xs text-gray-600">{{ stat.label }}</div>
          </div>
        </div>
      </div>

      <!-- Model Timing -->
      <div v-if="stats.showTiming" class="col-span-full bg-purple-50 p-4 rounded-lg border border-purple-600">
        <h4 class="mt-0 mb-2 text-purple-800">🤖 AI模型推理时间 (纯推理)</h4>
        <div class="text-xs text-gray-600 mb-2.5">
          💡 说明: 显示的是模型实际推理时间,不包含Ray调用开销。钢印/镭雕/R角是并行处理所有零件的时间。
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-2.5">
          <div
            v-for="stat in stats.modelTiming"
            :key="stat.label"
            class="bg-white p-2 rounded text-center border-l-4 border-purple-600"
          >
            <div class="text-base font-bold text-purple-800">{{ stat.value }}</div>
            <div class="text-xs text-gray-600">{{ stat.label }}</div>
          </div>
        </div>
        <div class="mt-2.5 p-2.5 bg-white rounded text-center">
          <div class="text-lg font-bold text-purple-800">{{ stats.pureInferenceTime.toFixed(3) }}s</div>
          <div class="text-xs text-gray-600">纯推理总时间 (4个模型)</div>
        </div>
      </div>

      <!-- Ray Overhead -->
      <div v-if="stats.showRayOverhead" class="col-span-full bg-orange-50 p-4 rounded-lg border border-orange-500">
        <h4 class="mt-0 mb-2 text-orange-700">📊 Ray分布式调用开销分析</h4>
        <div class="text-xs text-gray-600 mb-2.5">
          💡 说明: Ray开销 = 总调用时间 - 纯推理时间。包含网络传输、序列化、调度等待等。
        </div>
        <div class="grid grid-cols-2 md:grid-cols-5 gap-2.5">
          <div
            v-for="stat in stats.rayOverhead.stats"
            :key="stat.label"
            class="bg-white p-2 rounded text-center border-l-4 border-orange-500"
          >
            <div class="text-base font-bold text-orange-700">{{ stat.value }}</div>
            <div class="text-xs text-gray-600">{{ stat.label }}</div>
          </div>
        </div>
        <div class="mt-2.5 p-2.5 bg-white rounded">
          <div class="text-sm text-gray-600 mb-2"><strong>开销占比分析:</strong></div>
          <div class="flex gap-4 flex-wrap justify-around">
            <div class="text-center">
              <div class="text-xl font-bold text-purple-800">{{ stats.rayOverhead.pureInferenceTime.toFixed(3) }}s</div>
              <div class="text-xs text-gray-600">纯推理时间</div>
              <div class="text-[11px] text-gray-500">
                ({{ ((stats.rayOverhead.pureInferenceTime / stats.rayOverhead.totalAiTime) * 100).toFixed(1) }}%)
              </div>
            </div>
            <div class="text-2xl text-gray-500">+</div>
            <div class="text-center">
              <div class="text-xl font-bold text-orange-700">{{ stats.rayOverhead.totalRayOverhead.toFixed(3) }}s</div>
              <div class="text-xs text-gray-600">Ray调用开销</div>
              <div class="text-[11px] text-gray-500">
                ({{ ((stats.rayOverhead.totalRayOverhead / stats.rayOverhead.totalAiTime) * 100).toFixed(1) }}%)
              </div>
            </div>
            <div class="text-2xl text-gray-500">=</div>
            <div class="text-center">
              <div class="text-xl font-bold text-blue-800">{{ stats.rayOverhead.totalAiTime.toFixed(3) }}s</div>
              <div class="text-xs text-gray-600">AI处理总时间</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Feature Details -->
      <div v-if="stats.showFeatureDetails" class="col-span-full bg-green-50 p-4 rounded-lg border border-green-600">
        <h4 class="mt-0 mb-2.5 text-green-800">🔬 特征检测细分时间</h4>
        <div class="grid grid-cols-2 gap-2.5">
          <div
            v-for="stat in stats.featureDetails"
            :key="stat.label"
            class="bg-white p-2 rounded text-center border-l-4 border-green-600"
          >
            <div class="text-base font-bold text-green-800">{{ stat.value }}</div>
            <div class="text-xs text-gray-600">{{ stat.label }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StatsSection',
  props: {
    stats: {
      type: Object,
      required: true
    }
  }
}
</script>

